<template>
  <div class="container">
    <div class="top">
      <h1 class="title">正在面试</h1>
      <el-table
        :data="tableData.recuiting"
        height="97"
        border
        style="width: 100%"
        @row-dblclick="show"
        :row-style="markRed"
      >
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column label="方向" prop="direction"> </el-table-column>
        <el-table-column label="手机号" prop="phoneNum"> </el-table-column>
        <el-table-column label="学号" prop="sno"> </el-table-column>
        <el-table-column label="qq" prop="qq"> </el-table-column>
      </el-table>
      <span class="next-one" @click="next">下一位</span>
    </div>

    <div class="bottom">
      <h1 class="title">待面试队列</h1>
      <el-table
        :data="tableData.waiting"
        border
        style="width: 100%"
        class="table"
        @row-dblclick="show"
        :row-style="markRed"
      >
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column label="方向" prop="direction"> </el-table-column>
        <el-table-column label="手机号" prop="phoneNum"> </el-table-column>
        <el-table-column label="学号" prop="sno"> </el-table-column>
        <el-table-column label="qq" prop="qq"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
import { getLineData, noticeNext, sendMessage, changeStatus } from "@/api/user";
import { User } from "@/api/types";
import { confirm, error, showDescription, success } from "@/utils/util";
export default {
  name: "LineList",
  props: {
    direction: {
      type: String,
      default: "前端",
    },
  },
  setup(props) {
    //获取方向
    const { direction } = props;
    //队列数据
    let tableData = reactive<{ recuiting: Array<User>; waiting: Array<User> }>({
      recuiting: [],
      waiting: [],
    });
    const deleteRow = (index: any, rows: any) => {
      rows.splice(index, 1);
    };
    //获取队列数据
    //通过params判断是否为初始获取数据
    const getData = async (initial: boolean) => {
      const { data } = await getLineData(direction);
      console.log(data);

      if (data.code === "1") {
        if (data.data == null) {
          //队列为空
          tableData.recuiting = [];
          tableData.waiting = [];

          //回到初始状态
          localStorage.removeItem(direction);
          // return;
        } else {
          const result: Array<User> = data.data.map((item: string) =>
            JSON.parse(item)
          );
          if (initial) {
            //初始获取数据
            tableData.waiting = result;
            //通知第一位
          } else {
            tableData.recuiting = [result.shift()];
            tableData.waiting = result;
          }
        }
      }
    };
    //通知下一位
    const next = async () => {
      const isConfirm = await confirm("success", "提示", "确定让下一个面试吗");
      if (isConfirm) {
        const haveWating: boolean =
          tableData.waiting.length === 0 ? false : true;
        const haveRecruting: boolean =
          tableData.recuiting.length === 0 ? false : true;

        //初始时刻点击下一位，且无人排队时
        if (haveWating === false && haveRecruting === false) {
          return error("暂无下一位");
        } else {
          //正在面试或者等待队列有人时，都要调用后台接口更新队列
          if (localStorage.getItem(direction) === "geted") {
            const result = await noticeNext(direction);
            if (result.data.code === "1") {
              //只有当不是初始获取数据，正在面试有人才修改状态
              if (localStorage.getItem(direction) === "geted") {
                //修改正在面试的用户的状态
                await changeStatus(tableData.recuiting[0].openid, "2");
              }
              //通知下一位
              //重新获取队列
              await getData(false);
              console.log(tableData);

              //给下一位推送信息
              if (tableData.recuiting.length) {
                const openid = tableData.recuiting[0].openid;
                noticeByOpenid(openid);
              } else {
                error("暂无下一位");
              }
            }
          } else {
            //通知等待队列的第一位
            await getData(true);
            if (tableData.waiting.length) {
              noticeByOpenid(tableData.waiting[0].openid);
            } else {
              error("暂无下一位");
            }
            //保存状态，是已经获取了的
            localStorage.setItem(direction, "geted");
            getData(false);
          }
        }
      } else {
        error("取消让下一个面试");
      }
    };
    //推送信息
    const noticeByOpenid = async (openid: string) => {
      const res = await sendMessage(openid);
      const { code } = res.data;
      if (code === "1") {
        //成功推送服务
        success("成功通知");
      } else {
        error("通知失败");
      }
    };
    //展示个人介绍
    const show = (val: any) => {
      showDescription(val.introduce);
    };
    //标红队列中取消排队的人
    const markRed = ({ row }) => {
      //队列中有人退出排队
      if (row.state === "-1") {
        return { color: "red" };
      }
    };
    return {
      tableData,
      direction,
      getData,
      next,
      show,
      markRed,
    };
  },
  async created() {
    //判断是否是初次获取数据
    localStorage.getItem(this.direction) === "geted"
      ? await this.getData(false)
      : await this.getData(true);
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .top {
    padding: 2rem 0;
    border: 0;
    display: flex;
    flex-direction: column;
    .next-one {
      color: #a29bfe;
      padding: 1rem;
      cursor: pointer;
      align-self: flex-end;
      font-size: 2.2rem;
    }
  }
  .title {
    color: #fff;
    padding: 1rem 0;
    text-align: center;
    margin-bottom: 2rem;
    background-color: #a29bfe;
  }
  .bottom {
    padding-top: 2rem;
    height: 29rem;
    overflow: auto;
  }

  /* 同时有垂直和水平滚动条时交汇的部分 */
  ::-webkit-scrollbar-corner {
    display: block; /* 修复交汇时出现的白块 */
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #e0e0e0;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 5px;
  }
}
</style>
